/*
 * @Author: xuhongling
 * @Date:   2022-11-12 10:37:34
 * @Last Modified by:   xuhongling
 * @Last Modified time: 2024-08-22 08:42:29
 */
import { ref, unref, nextTick } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import { Tile as TileLayer } from 'ol/layer';
import XYZ from 'ol/source/XYZ';
import TileArcGISRest from 'ol/source/TileArcGISRest';
import * as olInteraction from 'ol/interaction';
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';
import mapImage from '@/assets/images/mapImage.png';

// 地图对象
const globalMap = ref(null);

// 初始化地图
const initBasicMap = async (target) => {
  await nextTick();
  const wrapEl: any = unref(target);
  if (!wrapEl) {
    return;
  }

  // 矢量图
  const vectorLayer = new TileLayer({
    source: new TileArcGISRest({
      crossOrigin: 'anonymous',
      url: 'http://218.94.6.92:6080/arcgis/rest/services/jssl_vector_map_2023/MapServer',
    }),
    visible: false,
  });
  vectorLayer.set('layerName', `vectorLayer`);

  // 矢量图 路网标注
  const vectorAnnoLayer = new TileLayer({
    source: new TileArcGISRest({
      crossOrigin: 'anonymous',
      url: 'http://218.94.6.92:6080/arcgis/rest/services/jssl_vector_anno_2023/MapServer',
    }),
    visible: false,
  });
  vectorAnnoLayer.set('layerName', `vectorAnnoLayer`);

  // 影像图
  const tileImageLayer = new TileLayer({
    source: new TileArcGISRest({
      crossOrigin: 'anonymous',
      url: 'http://218.94.6.92:6080/arcgis/rest/services/jssl_raster_map_2023/MapServer',
    }),
    visible: true,
  });
  tileImageLayer.set('layerName', `tileImageLayer`);

  // 发布的影像图
  const gisImageLayer = new TileLayer({
    source: new XYZ({
      url: 'http://xyhgq.keepsoft.net:9557/xyh_gis_server/{z}/{x}/{y}.png',
    }),
    visible: true,
    zIndex: 3,
  });
  gisImageLayer.set('layerName', `gisImageLayer`);

  // 地图UI图片
  const baseImageLayer = new ImageLayer({
    source: new ImageStatic({
      crossOrigin: 'anonymous',
      url: mapImage,
      imageExtent: [118.760, 32.201, 119.145, 32.443],
    }),
    zIndex: 5,
    visible: true,
  });
  baseImageLayer.set('layerName', `baseImageLayer`);

  // 地图UI图片
  /*const lightRingLayer = new ImageLayer({
    //className: 'lightRingLayer',
    source: new ImageStatic({
      crossOrigin: 'anonymous',
      url: lightRing,
      // imageExtent: [118.7762, 32.4636, 119.1158, 32.1766],
      imageExtent: [118.760, 32.141, 119.145, 32.488],
    }),
    zIndex: 1,
    visible: true,
  });
  lightRingLayer.set('layerName', `lightRingLayer`);*/

  const olMap: any = new Map({
    target: wrapEl,
    layers: [vectorLayer, vectorAnnoLayer, tileImageLayer, gisImageLayer, baseImageLayer],
    view: new View({
      center: [118.947055, 32.322297],
      zoom: 9,
      minZoom: 9,
      maxZoom: 18,
      projection: 'EPSG:4326',
    }),
  });

  // 储存地图对象
  globalMap.value = olMap;

  // Openlayers 禁用鼠标双击缩放事件
  const dblClickInteraction = olMap
    .getInteractions()
    .getArray()
    .find((interaction: any) => {
      return interaction instanceof olInteraction.DoubleClickZoom;
    });
  olMap.removeInteraction(dblClickInteraction);

  // olMap.updateSize(); // openlayers 第一次加载黑屏修复，重新加载地图

  // 地图鼠标经过小手样式
  olMap.on('pointermove', (event: any) => {
    const pixel = event.map.getEventPixel(event.originalEvent);
    const feature = event.map.forEachFeatureAtPixel(pixel, (feature: any) => {
      return feature.getProperties();
    });
    if (feature === undefined) {
      event.map.getTargetElement().style.cursor = 'auto';
    } else {
      event.map.getTargetElement().style.cursor = 'pointer';
    }
  });
};

// 返回地图对象，供调用的组件使用
const getGlobalMap = () => {
  return globalMap.value;
}

const clearGlobalMap = () => {
  globalMap.value = null;
}

export {
  initBasicMap,
  getGlobalMap,
  clearGlobalMap
}
